import { computed, defineComponent, onMounted, ref, type VNode } from "vue";
import "./index.css";

interface IComProps {
  strokeColor?: string;
  fontSize?: string;
  fontFamily?: string;
  gradientColor?: string;
  fontStyle?: string;
  content?: string;
}

const propsConfig = {
  strokeColor: {
    type: String,
    default: "#6371eb",
  },
  fontSize: {
    type: String,
    default: "30px",
  },
  fontFamily: {
    type: String,
    default: "Arial, sans-serif",
  },
  gradientColor: {
    type: String,
    default: "#6371eb",
  },
  fontStyle: {
    type: String,
    default: "italic",
  },
  content: {
    type: String,
    default: "A",
  },
};

function defineDefaultStyle(props: IComProps) {
  // "Arial, sans-serif" "italic"
  return {
    strokeColor: `1px ${props.strokeColor}` || "1px #6371eb",
    fontSize: props.fontSize || "30px",
    fontFamily: props.fontFamily || "",
    "-webkit-text-stroke": `1px ${props.strokeColor}` || "1px #6371eb",
    fontStyle: props.fontStyle || "",
    gradientColor: props.gradientColor || "#01ffd9",
  };
}

export const AniText = defineComponent({
  name: "AniText",
  props: propsConfig,
  setup(props: IComProps) {
    const safeProps = defineDefaultStyle(props);
    const computedStyle = computed(() => safeProps);

    const boxRef = ref<HTMLElement | null>(null);

    onMounted(() => {
      initAniTextData();
    });

    const initAniTextData = () => {
      if (!boxRef.value) {
        return;
      }
      boxRef.value.style.setProperty("--ani-Content", `"${props.content}"`);
      boxRef.value.style.setProperty("--gColor", `${safeProps.gradientColor}`);
    };

    return (): VNode => (
      <div
        ref={boxRef}
        class="ani-logo m-x-5 m-y-5"
        style={computedStyle.value}
      ></div>
    );
  },
});
